import React, { Component } from "react";
import { Input, Table, message } from "antd";
import { Link } from "react-router-dom";
import "./Home.scss";
import { balance } from "../../httpserver/api/finance.js";
import DoFilter from "./../../utils/DoFilter.jsx";
import MUtil from "./../../utils/MUtil.jsx";
const _mm = new MUtil();

const Search = Input.Search;
let timer = "";
export default class Home extends Component {
  static displayName = "Home";

  constructor(props) {
    super(props);
    this.state = {
      releaseStatus: "",
      e_invoice: "",
      pagination: {}
    };
  }
  componentWillMount() {
    console.log(_mm.getStorage("userInfo"));
    if (
      !_mm.getStorage("userInfo").hySysUser ||
      !_mm.getStorage("userInfo").hySysUser.id
    ) {
      this.props.history.push("/login");
    }
  }
  componentDidMount() {
    const pager = this.state.pagination;
    pager.current = 1;
    pager.pageSize = 100;
    this.setState(
      {
        pagination: pager
      },
      function() {
        this.balance();
      }
    );
    timer = setInterval(() => {
      this.balance();
    }, 30000);
  }
  componentWillUnmount() {
    if (timer) {
      clearInterval(timer);
    }
  }
  balance(search) {
    this.setState({
      loading: true
    });
    let obj = {
      isAll: "true",
      current: this.state.pagination.current,
      pageSize: 50,
      carNo: "",
      factoryId: _mm.getStorage("factory").factoryId
    };
    balance(obj)
      .then(res => {
        let recordList = [];
        for (let k in res.data) {
          for (let i of res.data[k]) {
            recordList.push(i);
          }
        }
        console.log(recordList);
        const pagination = this.state.pagination;
        pagination.total = res.data.totalnum;
        if (search) {
          recordList = this.dataScren(recordList);
        }
        this.setState({
          pagination: pagination,
          data: recordList,
          loading: false
        });
      })
      .catch(err => {
        this.setState({
          loading: false
        });
        message.error(err);
      });
  }
  handleTableChange(pagination, filters, sorter) {
    const pager = this.state.pagination;
    pager.current = pagination.current;
    this.setState({
      pagination: pager
    });
    this.balance();
  }
  //将搜索数据进行过滤
  dataScren(recordList) {
    let conditions = {
      chooses: []
    };
    let searchArr = ["carNo", "releaseStatus", "e_invoice"];
    for (let i = 0; i < searchArr.length; i++) {
      if (this.state[searchArr[i]]) {
        let condition = {
          type: searchArr[i],
          value: this.state[searchArr[i]]
        };
        conditions.chooses.push(condition);
      }
    }
    console.log(conditions);
    return DoFilter(recordList, conditions);
  }
  searchRealseChange(e) {
    this.setState(
      {
        releaseStatus: e.target.value
      },
      () => {
        this.balance("search");
      }
    );
  }
  searchInvokeChange(e) {
    this.setState(
      {
        e_invoice: e.target.value
      },
      () => {
        this.balance("search");
      }
    );
  }
  goSearch(val) {
    this.setState({
      carNo: val
    });
    console.log(val);
    this.balance("search");
  }
  render() {
    let that = this;
    const tabstaff = [
      {
        width: "3.5rem",
        title: "序号",
        dataIndex: "key",
        align: "center",
        key: "key",
        render: (text, row, index) => {
          return (
            <span>
              {(
                (parseInt(this.state.pagination.current) - 1) * 15 +
                index +
                1
              ).toString()}
            </span>
          );
        }
      },
      {
        width: "7rem",
        title: "车牌号",
        align: "center",
        dataIndex: "carNo",
        key: "carNo",
        render: (text, record) => {
          return (
            <div>
              <Link
                to={{
                  pathname: `/detail/`,
                  data: record
                }}
              >
                <span className="carNo">{record.carNo}</span>
              </Link>
            </div>
          );
        }
      },
      {
        // width: "2.2rem",
        title: "出库单号",
        align: "center",
        dataIndex: "codeId",
        key: "codeId",
        render: (text, record) => {
          return (
            <span className={record.forecastBalance < 0 ? "no-money" : ""}>
              {record.codeId}
            </span>
          );
        }
      },
      {
        width: "6rem",
        title: "放行状态",
        align: "center",
        dataIndex: "releaseStatus",
        key: "releaseStatus",
        render: (text, record) => {
          return (
            <span className={record.releaseStatus === "Y" ? "pass" : ""}>
              {record.releaseStatus === "N" ? "未放行" : "已放行"}
            </span>
          );
        }
      }
    ];
    return (
      <div className="page">
        <div className="page-top">
          <div className="search">
            <Search
              className="ipt-car-no"
              placeholder="请输入车牌号"
              enterButton="搜索车牌号"
              size="large"
              onSearch={val => {
                that.goSearch(val);
              }}
            />
          </div>
          <div className="filtle">
            <div>
              <span>放行状态 : </span>
              <select
                className="search-select"
                onChange={e => that.searchRealseChange(e)}
              >
                <option value="">所有</option>
                <option value="Y">已放行</option>
                <option value="N">未放行</option>
              </select>
            </div>

            <div>
              <span>开票状态 : </span>
              <select
                className="search-select"
                onChange={e => that.searchInvokeChange(e)}
              >
                <option value="">所有</option>
                <option value="完全地处理">完全地处理</option>
                <option value="没有处理">没有处理</option>
              </select>
            </div>
          </div>
        </div>

        <Table
          className="table"
          // rowClassName={(record, index) => {
          //   if (record.releaseStatus === "Y") {
          //     return "negative";
          //   }
          // }}
          loading={this.state.loading}
          rowKey={record => record.codeId + record.engineRecordId}
          columns={tabstaff}
          pagination={this.state.pagination}
          dataSource={this.state.data}
          onChange={this.handleTableChange.bind(this)}
          locale={{ emptyText: "暂无数据" }}
          bordered
        />
      </div>
    );
  }
}
